import 'package:flutter/material.dart';
import 'package:fsharing/core/viewmodels/pages/home/search_model.dart';
import 'package:fsharing/ui/pages/home/search_product_page.dart';
import 'package:fsharing/ui/pages/home/search_store_page.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:provider/provider.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final List<Widget> _pages = [SearchProductPage(), SearchStorePage()];

  PageController _pageController;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => SearchModel(),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: _SearchEditWidget(),
            actions: <Widget>[
              _TabWidget(
                selectedIndex: _selectedIndex,
                onChanged: (index) {
                  _pageController.jumpToPage(index);
                },
              ),
            ],
          ),
          body: PageView.builder(
            controller: _pageController,
            physics: NeverScrollableScrollPhysics(),
            onPageChanged: (value) {
              setState(() {
                _selectedIndex = value;
              });
            },
            itemBuilder: (context, index) {
              return _pages[index];
            },
            itemCount: _pages.length,
          ),
        ),
      ),
    );
  }
}

class _SearchEditWidget extends StatelessWidget {
  const _SearchEditWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        ClipRRect(
          borderRadius: BorderRadius.circular(14),
          child: TextField(
            autofocus: true,
            decoration: InputDecoration(
              hintText: '搜索',
              hintStyle: TextStyle(fontSize: 14),
              border: InputBorder.none,
              filled: true,
              contentPadding: EdgeInsets.symmetric(vertical: 6, horizontal: 12),
            ),
            style: TextStyle(fontSize: 14),
            textInputAction: TextInputAction.search,
            onSubmitted: (value) => _onActionClicked(context, value),
          ),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Container(
            margin: EdgeInsets.only(right: 12),
            child: Image.asset('assets/images/home/ic_search.png', width: 12),
          ),
        )
      ],
    );
  }

  void _onActionClicked(BuildContext context, String value) {
    SearchModel model = Provider.of(context, listen: false);
    model.keyword = value;
  }
}

class _TabWidget extends StatelessWidget {
  final int selectedIndex;
  final Function(int) onChanged;

  _TabWidget({
    Key key,
    @required this.selectedIndex,
    @required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          _TabItemWidget(
            iconName: 'assets/images/home/ic_product.png',
            title: '商品搜索', // bulletin
            selected: selectedIndex == 0,
            onTap: () {
              onChanged(0);
            },
          ),
          _TabItemWidget(
            iconName: 'assets/images/home/ic_store.png',
            title: '店铺搜索',
            selected: selectedIndex == 1,
            onTap: () {
              onChanged(1);
            },
          ),
        ],
      ),
    );
  }
}

class _TabItemWidget extends StatelessWidget {
  final String iconName;
  final String title;
  final bool selected;
  final Function onTap;

  _TabItemWidget({
    Key key,
    @required this.iconName,
    @required this.title,
    @required this.selected,
    @required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 4),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              iconName,
              width: 16,
              height: 16,
              color: selected ? Colors.white : Colors.grey,
            ),
            Container(
              margin: EdgeInsets.only(top: 4),
              child: Text(
                title,
                style: TextStyle(color: selected ? Colors.white : Colors.grey, fontSize: 9),
              ),
            ),
          ],
        ),
      ),
      onTap: onTap,
    );
  }
}
